require("../../assets/css/normalize.css");
require("../../assets/css/reset.css");
require("./mine-infor.less");

const dom = require("../../utils/dom.js");
const axios = require("../../utils/axios.js");

document.addEventListener("DOMContentLoaded", function () {
	// 点击返回我的页面
	dom.get(".back").addEventListener("click", function () {
		history.back();
	});

	// 上传头像
	dom.get("#headsIpt").addEventListener("change", function () {
		let fd = new FormData(); // Currently empty
		fd.append("file", this.files[0]);

		axios.post("/api/shared/uploadPortrait", fd).then((res) => {
			if (res.data.errno === 0) {
				//上传成功
				dom.get("#headsImg").src = axios.defaults.baseURL + res.data.data.url;
				dom.get("#headsImg").dataset.value = res.data.data.url; //用来提交的地址
			} else {
				//上传失败
				alert("上传失败");
			}
		});
	});

	// 选择性别
	dom.get("#gender").addEventListener("click", function () {
		weui.picker(
			[
				{
					label: "女",
					value: 0,
				},
				{
					label: "男",
					value: 1,
				},
				{
					label: "未公开",
					value: 2,
				},
			],
			{
				onConfirm: function (result) {
					dom.get("#gender").textContent = result[0].label;
					dom.get("#gender").dataset.value = result[0].value;
				},
				title: "请选择您的性别",
			}
		);
	});

	// 选择生日
	dom.get("#birthday").addEventListener("click", function () {
		weui.datePicker({
			start: 1990,
			end: new Date().getFullYear(),
			onConfirm: function (result) {
				dom.get("#birthday").textContent = result.map((v) => v.value).join("-");
			},
			title: "请选择您的出生日期",
		});
	});

	// 设置省份
	let provinceId = 0;
	dom.get("#province").addEventListener("click", async function () {
		let provinceData = await axios.get("api/shared/province");

		let proArr = provinceData.data.data.map((v) => {
			return { label: v.name, value: v.id };
		});

		weui.picker(proArr, {
			onConfirm: function (result) {
				dom.get("#province").textContent = result[0].label;
				provinceId = result[0].value;
				dom.get("#province").dataset.value = result[0].value;
			},
			title: "请选择您所在的省份",
		});
	});

	// 设置城市
	dom.get("#city").addEventListener("click", async function () {
		if (provinceId === 0) {
			alert("请先选择您所在的省份");
			return;
		}

		let cityData = await axios.get("/api/shared/city?provinceId=" + provinceId);
		// console.log(cityData);

		if (cityData.data.errno === 0) {
			let cityArr = cityData.data.data.map((v) => {
				return { label: v.name, value: v.id };
			});
			// console.log(cityArr);
			weui.picker(cityArr, {
				onConfirm: function (result) {
					dom.get("#city").textContent = result[0].label;
					dom.get("#city").dataset.value = result[0].value;
				},
				title: "请选择您所在的城市",
			});
		}
	});

	// 文本域输入
	dom.get("#text").addEventListener("input", function () {
		// console.log(dom.get("#text").value.length);
		dom.get("#textNum").textContent = dom.get("textarea").value.length;
	});

	// 上传信息
	dom.get("#btn").addEventListener("click", function () {
		let nickName = dom.get("#username").value;
		let gender = Number(dom.get("#gender").dataset.value);
		let provinceId = Number(dom.get("#province").dataset.value);
		let cityId = Number(dom.get("#city").dataset.value);
		let birthday = dom.get("#birthday").textContent;
		let imgUrl = dom.get("#headsImg").dataset.value;
		let sign = dom.get("#text").value;

		// console.log("昵称", nickName);
		// console.log("性别", gender);
		// console.log("省份", provinceId);
		// console.log("城市", cityId);
		// console.log("生日", birthday);
		// console.log("图片", imgUrl);
		// console.log("签名", sign);

		axios
			.post("/api/user/changeInfo", {
				nickName,
				gender,
				provinceId,
				cityId,
				birthday,
				imgUrl,
				sign,
			})
			.then((res) => {
				if (res.data.errno === 0) {
					//将新的令牌存储起来
					localStorage.setItem("token", res.data.data.token);
					history.back();
					alert("修改成功");
				} else {
					alert("修改失败");
				}
			});
	});

	// 回填信息
	axios.get("/api/user/info").then(async function (res) {
		// console.log(res);
		if (res.data.errno === 0) {
			console.log(res);
			dom.get("#username").value = res.data.data.nickName;

			let genderArr = ["女", "男", "未定义"];
			dom.get("#gender").dataset.value = res.data.data.gender;

			dom.get("#gender").textContent = genderArr[res.data.data.gender];

			let provinceData = await axios.get("api/shared/province");
			console.log(provinceData);
			let [province] = provinceData.data.data.filter(
				(v) => v.id === res.data.data.provinceId
			);
			dom.get("#province").textContent = province.name;
			dom.get("#province").dataset.value = res.data.data.provinceId;

			let cityData = await axios.get(
				"/api/shared/city?provinceId=" + res.data.data.provinceId
			);
			let [curCity] = cityData.data.data.filter(
				(v) => v.id === res.data.data.cityId
			);
			dom.get("#city").textContent = curCity.name;
			dom.get("#city").dataset.value = res.data.data.cityId;

			dom.get("#birthday").textContent = res.data.data.birthday;
			dom.get("#headsImg").src = axios.defaults.baseURL + res.data.data.imgUrl;
			dom.get("#text").value = res.data.data.sign;

			dom.get("#textNum").textContent = dom.get("#text").value.length;
		}
	});
});
